<template>
	<div id="app">
		<router-view v-slot="{ Component }">
			<keep-alive>
				<component :is="Component" />
			</keep-alive>
		</router-view>
		<!-- <keep-alive include="shouye">
			<router-view></router-view>
		</keep-alive> -->
		<Navbar>
			<Bar path='/shouye' activeColor='#FF0000'>
				<template v-slot:img>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:img2>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:text>
					<span>首页</span>
				</template>
			</Bar>
			<Bar path='/shapping'>
				<template v-slot:img>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:img2>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:text>
					<div>商城</div>
				</template>
			</Bar>
			<Bar path='/about'>
				<template v-slot:img>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:img2>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:text>
					<div>关于</div>
				</template>
			</Bar>
			<Bar path='/home'>
				<template v-slot:img>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:img2>
					<span class="viewsiconfont"></span>
				</template>
				<template v-slot:text>
					<div>我的</div>
				</template>
			</Bar>
		</Navbar>
	</div>

</template>
<script>
	import Bar from './components/Bar.vue'
	import Navbar from './components/Navbar.vue'
	export default {
		name: 'App',
		components: {
			Bar,
			Navbar
		},
	}
</script>
<style>
	@import './css/normalize.css';

	body {
		background-color: #ffe3e3;
		margin: 0px;
		padding: 0px;
	}

	/*引入字体图标*/
	@font-face {
		font-family: "iconfont";
		/* Project id 3119856 */
		src: url('fonts/iconfont.woff2?t=1641370354430') format('woff2'),
			url('fonts/iconfont.woff?t=1641370354430') format('woff'),
			url('fonts/iconfont.ttf?t=1641370354430') format('truetype');
	}

	.viewsiconfont {
		font-family: "iconfont" !important;
		font-size: 25px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.clearfloat::after {
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;

	}
	li {
		list-style: none;
	}
</style>
